<template>
  <div class="components-input-presuffix" >
    <div>
      <el-input
        :disabled="disabled"
        :readonly="readonly"
        ref = "input"
        placeholder="请选择分类"
        @focus="handleFocus"
        readonly=""
        @click="openModal"
        v-model="text">
        <i @click="handleEmpty"  slot="suffix" class="el-input__icon el-icon-circle-close"></i>
      </el-input>
    </div>
    <select-classes-modal ref="selectModal" @ok="selectFinsh"></select-classes-modal>
  </div>
</template>

<script>
  import { getAction } from '@/api/manage'
  import SelectClassesModal from './SelectClassesModal'


  export default {
    name: 'SelectClasses',
    components: { SelectClassesModal },
    data(){
      return {
        inputFlag :true,
        text:""
      }
    },
    props:{
      value:{
        type:String,
        required:false
      },
      disabled:{
        type:Boolean,
        required: false,
        default:false
      },
      readonly:{
        type:Boolean,
        required: false,
        default:false
      }
    },
    watch:{
      value(val){
        this.initData();
      }
    },
    mounted(){
      this.initData();
    },
    methods:{
      initData(){
        if(this.inputFlag) {
          this.text = "";
          if (this.value) {
            getAction(`/classes/getInfo/${this.value}`).then(res => {
              if (res.success) {
                this.text = res.data.typeName;
              }
            }).catch(e => console.error(e));
          }
        }
        this.inputFlag = true;
      },
      openModal(){
        this.$refs.selectModal.open();
      },
      handleEmpty(){
        if(!this.$refs.input.inputDisabled){
          this.text = "";
          this.$emit("input","");
        }
      },
      handleFocus(){
        this.$refs.selectModal.open();
      },
      selectFinsh(row){
        this.text = row.typeName
        this.inputFlag = false;
        this.$emit("input",row.id);
      }
    }
  }
</script>

<style scoped>

</style>
